<template>
  <div class="container">
    <el-table v-loading="isLoading" :data="deadlines" border>
      <el-table-column label="类型" prop="type"/>
      <el-table-column label="时间">
        <template #default="{row}">
          {{ time(row.hour, row.minute) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button :icon="Edit" link type="primary" @click="handleEditClick(row.type)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <deadline-dialog v-model="isEditDialogShow" :meal-type="mealTypeToEdit" @success="handleDialogSuccess"/>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue"
import {getDeadlines} from "@/api/deadline";
import {DeadlineResponse} from "@/api/types/deadline";
import {Edit} from "@element-plus/icons-vue";
import DeadlineDialog from "@/components/dialog/DeadlineDialog.vue";
import {MealType} from "@/api/types/meal";

const isEditDialogShow = ref(false)
const isLoading = ref(false)
const deadlines = ref<DeadlineResponse[]>([])
const mealTypeToEdit = ref<MealType | undefined>()

async function getData() {
  if (isLoading.value == false) {
    isLoading.value = true
  }
  const {result} = await getDeadlines()
  if (result !== undefined) {
    deadlines.value = result
    isLoading.value = false
  }
}

getData()

async function handleDialogSuccess() {
  await getData()
}

function handleEditClick(mealType: MealType) {
  mealTypeToEdit.value = mealType
  isEditDialogShow.value = true
}

function time(hour: string, minute: string) {
  return `${hour}:${minute}`
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: white;
}
</style>
